<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title style="font-size: 18px;">全部文件</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="layui/dist/css/layui.css"  media="all">
    <link rel="stylesheet" href="css/bootstrap.min.css"  media="all">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>

<div class="demoTable">
    <button type="button" class="layui-btn" id="addFile">
        <i class="layui-icon">&#xe654;</i>新建文件夹
    </button>
    <button type="button" class="layui-btn layui-btn layui-btn-warm" id="uploadFile">
        <i class="layui-icon">&#xe67c;</i>上传文件
    </button>
    &nbsp;&nbsp;    &nbsp;&nbsp;
    <div class="layui-inline">
        <input class="layui-input" name="id" id="demoReload" autocomplete="off" placeholder="请输入搜索内容"> <!--原为name="id"-->
    </div>
    <button class="layui-btn" data-type="reload">搜索</button>           <!--搜索栏目添加-->
</div>

<table class="layui-hide" id="LAY_table_user" lay-filter="user"></table>
<table class="layui-hide" id="LAY_table_user1" lay-filter="user"></table>
<!--*新建文件夹操作-->
<div id="addFolderDiv">
    <div style="margin:0 auto ;width: 60%;margin-top: 50px">
        <input type="text" name="folder" id="folder"  placeholder="请输入文件夹名称" class="layui-input">
        <div style="text-align: center;margin-top: 25px">
            <button type="button" class="layui-btn"id="checkFolderBtn" >创建</button>
        </div>
    </div>
</div>
<div id="renameFileDiv"><!--重命名弹出框-->
    <div style="margin:0 auto ;width: 60%;margin-top: 50px">
        <input type="text" name="newFileName" id="newFileName"  placeholder="请输入新的文件名" class="layui-input">
        <input type="hidden" name="oldFileAbsolute" id="oldFileAbsolute" >
        <input type="hidden" name="oldId" id="oldId" >
        <div style="text-align: center;margin-top: 25px">
            <button type="button" class="layui-btn" id="renameBtn" >重命名</button>
        </div>
    </div>
</div>

<script type="text/html"  id="filenameDev">
    {{# if(d.fileType === '文件夹'){ }}
    <a href="javascript:;" onclick ="searchFileofFloder('{{d.id}}');" ><i class="glyphicon glyphicon-folder-close" style="color: #F0DA72;font-size: 16px;"></i>&nbsp;{{d.fileName}} </a>
    {{# } else { }}
    <a href="javascript:;" onclick ="getFile('{{d.fileAbsolute}}');" ><i class="glyphicon glyphicon-file" style="color: #A9A9A9;font-size: 16px;"></i>&nbsp;{{d.fileName}} </a>
        {{# } }}
</script>
<!--*各个功能-->
<script type="text/html" id="barDemo">
    <a lay-event="check">
        <i class="layui-icon layui-icon-file" style="font-size: 18px;"></i>
    </a>
    <a lay-event="share">
        <i class="layui-icon layui-icon-rate" style="font-size: 18px;"></i>
    </a>
    <a lay-event="download">
        <i class="layui-icon layui-icon-download-circle" style="font-size: 18px;"></i>
    </a>
    <a lay-event="fx">
        <i class="layui-icon layui-icon-share" style="font-size: 18px;"></i>
    </a>
    <a lay-event="edit">
        <i class="layui-icon layui-icon-edit" style="font-size: 18px;"></i>
    </a>
    <a lay-event="delete">
        <i class="layui-icon layui-icon-delete" style="font-size: 18px;"></i>
    </a>
</script>
<script src="layui/dist/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的,下面几行需要再进行调整！！！！ -->

<script th:inline='none'>
    layui.use(['table','layer'], function(){
        var table = layui.table;
        var $ =layui.$;
        $("#addFolderDiv").hide();
        $("#renameFileDiv").hide();
        //方法级渲染
        table.render({
            elem: '#LAY_table_user'
            ,url: 'getAllFile'
            ,cols: [[
                {checkbox: true, fixed: true}
                ,{field:'fileName', title: '文件名',templet:'#filenameDev',fixed:true,width:200,sort:true}//fixed内容为自己添加
                ,{field:'fileSize', title: '文件大小', width:150,sort: true}
                ,{field:'fileType', title: '文件类型', width:150,sort: true}
                ,{field:'uploadTime', title: '上传时间', width:200,sort: true,templet:"<div>{{layui.util.toDateString(d.uploadTime,'yyyy-MM-dd HH:mm:ss')}}</div>"}
                ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:300,sort: true}
            ]]
            ,page: true//开启分页
            ,id:'testReload'
            ,parseData: function (res) {
               // console.log(res);
                return {
                    "code": 0,
                    "msg": res.msg,
                    "count": res.count,
                    "data": res.data
                };
            }
        });

        var $ = layui.$, active = {
            reload: function(){
                var demoReload = $('#demoReload');
                //执行重载
                table.reload('testReload', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    ,where: {
                        id: demoReload.val()
                    }
                });
            }
        };

        $('.demoTable .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
         //弹出框
        $("#addFile").click(function () {
            //页面层
            layer.open({
                type: 1,
                area: ['500px', '300px'], //宽高，页面层大小！
                content: $("#addFolderDiv")
            });
        });//手动添加了";"
        <!--新建文件夹-->
        $("#checkFolderBtn").click(function () {
            var folder=$("#folder").val();
            var parentId=$("#parentId").val();
            if(folder=="")
            {
                layui.alert("请输入文件夹名称！");
            }else
            {
                $.ajax({
                    url:'insertFolder',
                    type:"get",
                    data:{fileName:folder,parentId:parentId},
                    dataType:"json",
                    success:function (res) {
                        if(res.code==1)
                        {
                            layer.open({
                                title:'提示信息',
                                content:'文件夹创建成功！',
                                btn:['确认'],
                                yes:function () {
                                    window.location.reload();
                                }
                            })
                        }else {
                            layer.alert(res.msg);
                        }
                    },
                    error:function () {
                        layui.alert("系统出错，请联系管理员！");
                    }
                })
            }

        })
    });
    layui.use(['upload','layer'],function () {
        var upload = layui.upload;
        var layer = layui.layer;
        //执行实例
        upload.render({
            elem: '#uploadFile' //绑定元素
            ,url: 'uploadFile' //上传接口
            ,accept:'file'//可上传文件
            ,done: function(res){
                //上传完毕回调
                if(res.code==0){
                    layer.open({
                        title:'提示信息'
                        ,content:'导入成功！'
                        ,btn:['确认']
                        ,yes: function(){
                            window.location.reload();//刷新页面
                        }
                    });
                }
                else{
                    layer.alert(res.msg);
                }
            }
            ,error: function(){
                //请求异常回调
                layer.alert("系统出错，请联系管理员");
            }
        });
    })
</script>

<script>
    layui.use('table', function() {
        var table = layui.table;
        var $=layui.$;
        table.on('tool(user)', function (obj) {
            var data = obj.data;
            //console.log(obj)
            if (obj.event === "check") {
                getFile(data.fileAbsolute);
            }else if(obj.event==="fx"){
                $.ajax({
                    url: 'shareFile',
                    type: "get",
                    sync: false,
                    data: {fileName: data.fileName},
                    dataType: "json",
                    success: function (res) {
                        if (res.code === 0) {
                            layer.open({
                                title: '提示信息',
                                content: '文件分享成功！',
                                btn: ['确认'],
                                yes: function () {
                                    window.location.reload();
                                }
                            })
                        } else {
                            layer.alert(res.msg);
                        }
                    },
                    error: function () {
                        layer.alert("系统出错，请联系管理员！")  //layer
                    }
                })
            }
        })
    });

</script>

<script>
    layui.use(['table','layer'], function() {
        var table = layui.table;
        var $=layui.$;
        table.on('tool(user)', function (obj) {
            var data = obj.data;
            //console.log(obj)
            if (obj.event === "check") {
                getFile(data.fileAbsolute);
            }
            else if(obj.event === "fx"){
                $.ajax({
                    url:'shareFile',
                    type: "get",
                    sync: false,
                    data: {fileName: data.fileName},
                    dataType: "json",
                    success: function (res) {
                        if(res.code === 0){
                            layer.open({
                                title:'提示信息',
                                content: '文件分享成功！',
                                btn: ['确认'],
                                yes: function () {
                                    window.location.reload();
                                }
                            })
                        }else{
                            layer.alert(res.msg);
                        }
                    },
                    error:function(){
                        layer.alert("有错误，请联系管理员！")
                    }
                })
            }else if(obj.event === "download"){//下载
                document.location.href="download?fileAbsolute="+data.fileAbsolute;

            }
            else if(obj.event === 'edit') {
                $("#oldFileAbsolute").val(data.fileAbsolute);//把fileAbsolute赋值给oldFileAbsolute！
                $("#oldId").val(data.id);//***********************************参数添加调整
                layer.open({
                    type: 1,
                    <!--skin: 'layui-layer-rim', 加上边框-->
                    area: ['500px', '300px'], //宽高，页面层大小！
                    content: $("#renameFileDiv")//打开这个界面
                });
            }
            else if(obj.event === "delete") {
                layer.confirm('确定删除么', function (index) {
                    obj.del(); //删除对应行（tr）的DOM结构
                    layer.close(index);//向服务端发送删除指令
                }),
                    $.ajax({
                        url: 'deleteFile',
                        type: "get",
                        sync: false,
                        data: {fileName: data.fileName, parentId: data.parentId},
                        dataType: "json",
                        success: function (res) {
                            if (res.code === 0) {
                                layer.open({
                                    title: '提示信息',
                                    content: '文件删除成功！',
                                    btn: ['确认'],
                                    yes: function () {
                                        window.location.reload();
                                    }
                                })
                            } else {
                                layer.alert(res.msg);
                            }

                        },
                        error: function () {
                            layui.alert("有错误，请联系管理员！")
                        }
                    })
            }
        })

    //*******************
    $("#renameBtn").click(function () {
        var newFileName =$("#newFileName").val();
        var oldFileAbsolute=$("#oldFileAbsolute").val();//取值操作。
        var oldId=$("#oldId").val();
        //   var parentId=$("#parentId").val();
        if(newFileName=="")
        {
            layui.alert("文件名称不能为空！")
        }else {
            $.ajax({
                url:'renameFile',//理解为浏览网址
                type:"get",
                data:{newFileName:newFileName,fileAbsolute:oldFileAbsolute,id:oldId},//参数待修缮
                dataType:"json",
                success:function (res) {
                    if(res.code==0) {
                        layer.open({
                            title:'提示信息',
                            content:'文件重命名成功！',
                            btn:['确认'],
                            yes:function () {
                                window.location.reload();
                            }
                        })
                    }else {
                        layer.alert(res.msg);
                    }
                },
                error:function () {
                    layer.alert("有错误，文件重命名失败，请联系管理员！")
                }
            })
        }
    })
    })
</script>
<script type="text/javascript">
    var $ = layui.$;
    function searchFileofFloder(id) {
        alert(id);
        if (id != "") {
            $("#parentId").val(id);
        }
    }
    function  getFile(data) {
        alert(data);
        $.ajax({
            url: 'getFile',
            type: "get",
            data: {fileAbsolute: data},
            dataType: "json",
            success: function (res) {
                alert(res.url);
                var index = layer.open({
                    type: 2,
                    content: res.url,
                    area: ['600px', '450px'],
                    maxmin: true
                });
                layer.full(index);
            }
        })
    }
</script>

</body>
</html>